"use client"

import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
import type { VariantProps } from "class-variance-authority"
import * as React from "react"

import { ny } from "~/lib/utils"
import { buttonVariants } from "~/registry/miami/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
      className={ny(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
         className,
      )}
      {...props}
      ref={ref}
   />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
   <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
         ref={ref}
         className={ny(
            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
            className,
         )}
         {...props}
      />
   </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

function AlertDialogHeader({
   className,
   ...props
}: React.HTMLAttributes<HTMLDivElement>) {
   return (
      <div
         className={ny(
            "flex flex-col space-y-2 text-center sm:text-left",
            className,
         )}
         {...props}
      />
   )
}
AlertDialogHeader.displayName = "AlertDialogHeader"

function AlertDialogFooter({
   className,
   ...props
}: React.HTMLAttributes<HTMLDivElement>) {
   return (
      <div
         className={ny(
            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
            className,
         )}
         {...props}
      />
   )
}
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
      ref={ref}
      className={ny("text-lg font-semibold", className)}
      {...props}
   />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
      ref={ref}
      className={ny("text-muted-foreground text-sm", className)}
      {...props}
   />
))
AlertDialogDescription.displayName =
   AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &
      VariantProps<typeof buttonVariants>
>(({ className, variant, size, ...props }, ref) => (
   <AlertDialogPrimitive.Action
      ref={ref}
      className={ny(buttonVariants({ variant, size }), className)}
      {...props}
   />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &
      VariantProps<typeof buttonVariants>
>(({ className, variant = "outline", size, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
      ref={ref}
      className={ny(
         buttonVariants({ variant, size }),
         "mt-2 sm:mt-0",
         className,
      )}
      {...props}
   />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
   AlertDialog,
   AlertDialogPortal,
   AlertDialogOverlay,
   AlertDialogTrigger,
   AlertDialogContent,
   AlertDialogHeader,
   AlertDialogFooter,
   AlertDialogTitle,
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
}
